<script lang="ts" setup>
import { ref } from 'vue'
import {
  getPermission,
  addPermission,
  delPermission,
  updatePermission,
  getPermissionDetail
} from '@/api/reqapi'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted } from 'vue'
import { ElTree } from 'element-plus'
const tableData = ref([])
const eid = ref('')
// 转树形结构之最佳方案
const toTree = (data: any[], pid = 0) => {
  const treeData: any[] = []
  data.forEach((item: any) => {
    if (item.pid == pid) {
      // 注意这里使用了严格等于 === 来避免类型混淆
      const children = toTree(data, item.id) // 递归调用以查找子项
      // 如果当前项有子项，则为其添加一个 children 属性
      if (children.length) {
        item.children = children // 将子项数组赋值给当前项的 children 属性
      }
      treeData.push(item) // 将当前项（无论是否有子项）添加到树形数据中
    }
  })
  return treeData
}

const init = async () => {
  await getPermission().then((res) => {
    tableData.value = toTree(res.data)
  })
}

const dialogFormVisible = ref(false)
const title = ref('')
const formLabelWidth = '160px'
// 新增权限点
const addObj = ref({
  name: '', //权限点名称
  code: '', //权限点标识
  description: '', //权限点描述
  type: 1, //权限点类型：1为页面路由权限点, 2为按钮权限点
  pid: 0, //权限点父级ID
  enVisible: 0 //权限点开启状：0关闭, 1开启. (暂时无需判断, 前端逻辑上默认全都有效直接用)
})
// 添加页面路由权限点
const addPer = () => {
  addObj.value.type = 1
  addObj.value.pid = 0
  addObj.value.enVisible = 0
  addObj.value.name = ''
  addObj.value.code = ''
  addObj.value.description = ''
  dialogFormVisible.value = true
}
// 添加按钮权限点
const addOne = (id: any) => {
  addObj.value.type = 2
  addObj.value.pid = id
  addObj.value.enVisible = 0
  addObj.value.name = ''
  addObj.value.code = ''
  addObj.value.description = ''
  dialogFormVisible.value = true
}
// 点击编辑
const handleEdit = (row: any) => {
  addObj.value.name = row.name
  addObj.value.code = row.code
  addObj.value.description = row.description
  addObj.value.type = row.type
  addObj.value.pid = row.pid
  addObj.value.enVisible = row.enVisible
  eid.value = row.id
  dialogFormVisible.value = true
}
// 点击确认
const isOk = async () => {
  if (addObj.value.name == '') {
    ElMessage({
      message: '请输入权限点名称',
      type: 'error'
    })
    return
  }
  if (addObj.value.code == '') {
    ElMessage({
      message: '请输入权限点标识',
      type: 'error'
    })
    return
  }
  if (addObj.value.description == '') {
    ElMessage({
      message: '请输入权限点描述',
      type: 'error'
    })
    return
  }
  if (eid.value) {
    await updatePermission(eid.value, {
      id: eid.value,
      name: addObj.value.name,
      code: addObj.value.code,
      description: addObj.value.description,
      type: addObj.value.type,
      pid: addObj.value.pid,
      enVisible: addObj.value.enVisible
    }).then(() => {
      init()
      eid.value = ''
      ElMessage({
        message: '编辑成功',
        type: 'success'
      })
    })
  } else {
    await addPermission(addObj.value).then(() => {
      init()
    })
    ElMessage({
      message: '添加成功',
      type: 'success'
    })
    dialogFormVisible.value = false
  }

  isNo()
}
// 点击取消
const isNo = () => {
  addObj.value.enVisible = 0
  addObj.value.name = ''
  addObj.value.code = ''
  addObj.value.description = ''
  dialogFormVisible.value = false
}
onMounted(() => {
  init()
})
const handleDelete = async (id: any) => {
  await delPermission(id).then(() => {
    init()
  })
  ElMessage({
    message: '删除成功',
    type: 'success'
  })
}

const defaultProps = {
  children: 'children',
  label: 'name'
}
</script>
<template>
  <div class="white">
    <el-button type="primary" class="mar" @click="addPer">添加权限</el-button>

    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="code" label="标识" width="180" />
      <el-table-column prop="description" label="描述" width="180" />
      <el-table-column label="操作" class="blue">
        <template #default="scope">
          <el-button @click="addOne(scope.row.id)" style="border: none">
            <span style="color: blue">添加</span>
          </el-button>
          <el-button @click="handleEdit(scope.row)" style="border: none">
            <span style="color: blue">编辑</span>
          </el-button>
          <el-popconfirm
            title="确定删吗?"
            @confirm="handleDelete(scope.row.id)"
            confirm-button-text="确定"
            cancel-button-text="取消"
          >
            <template #reference>
              <el-button style="border: none">
                <span style="color: blue">删除</span>
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogFormVisible" :title="title" width="600">
      <el-form :model="addObj">
        <el-form-item label="权限名称" :label-width="formLabelWidth">
          <el-input v-model="addObj.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="权限标识" :label-width="formLabelWidth">
          <el-input v-model="addObj.code" autocomplete="off" />
        </el-form-item>
        <el-form-item label="权限描述" :label-width="formLabelWidth">
          <el-input v-model="addObj.description" autocomplete="off" />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="addObj.enVisible"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div
          class="dialog-footer"
          style="display: flex; justify-content: center"
        >
          <el-button type="primary" @click="isOk"> 确定 </el-button>
          <el-button @click="isNo">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
.white {
  padding: 20px;
}
// 给表头添加灰色背景
/deep/ .el-table th {
  background-color: #e1e3e8;
}
.mar {
  margin-bottom: 20px;
}
.el-tree {
  margin-top: 20px;
}
</style>
